<template>
	<div id="main_box">
      <div id="title">
        修改密码
      </div>

    <div id="inputBox">
      <div id="mm1">
        输入当前密码：<input type="text" placeholder="当前密码" v-model="form.password">
      </div>
      <div id="mm2">
        输入新密码：<input type="text" placeholder="新密码" v-model="form.password1" @click="xzOldPsw()">
      </div>
      <div id="mm3">
        确认新密码：<input type="text" placeholder="确认新密码" v-model="form.password2" @click="IsNewMM()">
      </div>
      <div id="save">
        <input id="bc" type="button" value="点击保存" @click="saveNewMM()"/>
      </div>
    </div>
	</div>
</template>

<script>
export default{
  data(){
    return{
      form:{
       password:'',
       password1:'',
       password2:''
      },
    }
  },
  methods: {
    xzOldPsw() {
      if (this.form.password.length==0){
        this.$message({message:"请输入当前密码",type:'warning'});
        return ;
      }
      this.$http.get("userCenter/userCtl/xzOldPsw?password="+this.form.password).then((resp)=>{
        if (resp.data.code==200){
          this.$message({message: resp.data.message, type: 'success'});
        }
      })
    },
    IsNewMM(){
      if (this.form.password==this.form.password1){
        this.$message({message:"新密码不能与旧密码相同！",type:'warning'});
        return ;
      }
    },
    saveNewMM(){
      if (this.form.password==this.form.password1){
        this.$message({message:"新密码不能与旧密码相同！",type:'warning'});
        return ;
      }
      if (this.form.password1!=this.form.password2||this.form.password.length==0||this.form.password1.length==0||this.form.password2==0){
        this.$message({message:"重新确认密码！",type:'warning'});
        this.form.password2="";
        return ;
      }
      this.$http.get("userCenter/userCtl/saveNewPsw?password="+this.form.password1).then((resp)=>{
        if (resp.data.code==200){
          this.$message({message: resp.data.message, type: 'success'});
        }
      })
    }
  }
}
</script>

<style scoped>
  #main_box{
    background: #fabebb;
    height:60%;
  }
  #title{
    top: 10px;
    left: 50%;
    font-size: larger;
    font-family: 宋体;
    position: relative;
    height: 50px;
  }
  #inputBox{
    left: 20px;
    position: relative;
  }
  #mm1,#mm2,#mm3{
    margin-top: 20px;
  }

  input{
    position: relative;
    height: 25px;
    left: 20px;
    width: 40%;
  }
  #save{
    margin-top: 50px;
  }
  #bc{
    position: relative;
    left: 20%;
    background: #e27676;
    width:500px;
    height: 30px;
  }
  #bc:hover{
    background: red;
  }

</style>
